<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{font-family: "Microsoft YaHei",serif;}
			body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
			ol,ul,li{margin:0;padding:0;list-style:none;}
			img{border:none;}
			
			#wrap{
				position: relative;
				overflow: hidden;
				width: 604px;
				height: 342px;
				margin: 50px auto 0;
			}
			#wrap img{
				display:none;
			}
			#wrap img.show{
				display:block;
			}
			#wrap .tab{
				width: 200%;
				height: 12.5%;
				background-color: #000;
				color: #eee;
			}
			#wrap .tab li{
				float:left;
				width: 10%;
				height: 100%;
				text-align:center;
				cursor: pointer;
			}
			#wrap .tab li span{
				line-height: 42.75px;
				font-size: 12px;
			}
			#wrap .tab li.active{
				background-color: rgba(255,255,255,0.15);
				color: #f3c258;
			}
			.side-left,.side-right{
				position:absolute;
				width:41px;
				height:69px;
				top:0;
				bottom:0;
				margin:auto;
				background-image:url("img/icon-slides.png");
				background-repeat:no-repeat;
			}
			.side-left{
				left:0;
				background-position:-84px 0;
			}
			.side-right{
				right:0;
				background-position:-126px 0;
			}
			.side-left:hover{
				background-position:0;
			}
			.side-right:hover{
				background-position:-42px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul class="image">
				<li><a href="javascript:void(0);"><img src="img/1.jpg" alt="" class="show"></a></li>
				<li><a href="javascript:void(0);"><img src="img/2.jpg" alt=""></a></li>
				<li><a href="javascript:void(0);"><img src="img/3.jpg" alt=""></a></li>
				<li><a href="javascript:void(0);"><img src="img/4.jpg" alt=""></a></li>
				<li><a href="javascript:void(0);"><img src="img/5.jpg" alt=""></a></li>
			</ul>
			<ul class="tab">
				<li class="active"><span>国家宝藏合作</span></li>
				<li><span>炮台射手的重生</span></li>
				<li><span>微赛事高校赛</span></li>
				<li><span>李信视频教学</span></li>
				<li><span>赛事月卡牌故事</span></li>
			</ul>
			<div class="sideBtn side-left"></div>
			<div class="sideBtn side-right"></div>
		</div>
			<script>
				let aImgs = document.querySelectorAll("#wrap img")
				let aTabs = document.querySelectorAll("#wrap .tab li")
				let aBtns = document.querySelectorAll(".sideBtn")
				let len = aTabs.length;
				
				let index = 0;
				
				//将模块化
				function change(x){
					aImgs[index].className = "";
					aTabs[index].className = "";
					
					index = x;
					
					aTabs[x].className = "active";
					aImgs[x].className = "show";
				}
				for(let i=0;i<len;i++){
					aTabs[i].onclick = function(){
						if(index===i)return;
						
						change(i);
					}
				}
				aBtns[0].onclick = function(){
					let num = index;
					num--;
					if(num<0){
						num = len-1;
					}
					change(num);
				}
				aBtns[1].onclick = function(){
					let num = index;
					num++;			
					if(num>=len){
						num = 0;
					}
					change(num);
				}
			</script>
	</body>
</html>
